<template>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(appBanner) in appBanners" :key="appBanner.biMark" @click="getNum($event)">
            <a hef="#">
                <img :src="appBanner.imgUrl" />
            </a>
        </div>
    </div>
    <div class="tabbar">
        <span class='num1'>{{num1}}</span>
        <span class='split'>/</span>
        <span class='num2'>8</span>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>


</div>

</template>

<script>
    import Swiper from "swiper"
     import 'assets/styles/swiper.css';
    import {mapActions,mapGetters,mapMutations,mapState} from "vuex"
    export default {
        data(){
            return {
                num1: 1
            }
        },
        computed: {
            ...mapState("Home",["appBanners"]),

            
            
        },

        updated() {
            var _this = this;
            //     Vue.nextTick(() => {
              var mySwiper = new Swiper('.swiper-container', {
                        loop: true,                 
                })
                    mySwiper.update
           
        }
    
    }
</script>

<style lang="stylus" scoped>
    .swiper-container
        width 100%
        height 100%
        position relative
        .swiper-wrapper
            height 100%
            .swiper-slide
                height 100%
                a
                    display block
                    width 100%
                    height 100%
                    img
                        width 100%
        .tabbar
            position absolute 
            top 1.6rem
            left .16rem
            width .35rem
            height .18rem
            color #fff
            background url("") left top no-repeat 
            background-size cover
            display flex
            font-size .12rem
            z-index 1000
            span
                display inline-block
                width .15rem
                text-align center
                &.num1
                    margin-left .025rem
                &.num2
                    margin-right .025rem
            

</style>